<template>
	<view class="sell-share-list-con">
		<block v-if="ctype == 'sellList'">
			<view v-if="sellShow" class="sell-share-list">
				<!-- #ifdef  MP-ALIPAY || MP-BAIDU || MP-WEIXIN || MP-TOUTIAO -->
				<button :plain="true" hover-class="none" open-type="share">立即分享</button>
				<!-- #endif -->

				<!-- #ifdef H5 || APP-PLUS -->
				<view v-if="shareUrl" @click="copyShareUrl">复制链接</view>
				<!-- #endif -->

				<view @click="sharePoster">分享海报</view>

				<view class="off" @click="sellShare">取消</view>
			</view>
		</block>

		<block v-if="ctype == 'sellBtn'">
			<view class="sell-btn" @click="sellShare">分销赚 <block v-if="profit > 0"><text class="symbol">{{globalExchangeRate}}</text>{{profit}}</block><block v-else>佣金</block>
			</view>
		</block>
	</view>
</template>

<script>
	/**
	 * 产品分享弹窗插件
	 */
	
	import uniCopy from '@/utils/xb-copy/uni-copy.js'
	import {
		getProDetailPage
	} from "@/utils/toPath.js"
	export default {
		name: 'stProductDistribution',
		props: {
			sellShow: {
				type: Boolean,
				default: false
			},
			profit: {
				type: [Number, String],
				default: ''
			},
			ctype: {
				type: [Number, String],
				default: 'sellList'
			},
			productId: {
				type: [Number, String],
				default: ''
			},
			typeId: {
				type: [Number, String],
				default: ''
			},
			shareUrl: {
				type: [String],
				default: ''
			}
		},
		data() {
			return {

			};
		},
		created() {
		},
		methods: {
			// #ifdef H5 || APP-PLUS
			// 复制当前页面地址
			copyShareUrl() {
				uniCopy({
					content: this.shareUrl,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			// #endif
			// 分享海报
			sharePoster() {
				this.$emit('showShare', false);
				uni.navigateTo({
					url: `../distribution/poster?typeid=${this.typeId}&id=${this.productId}`
				})
			},
			// 弹窗控制
			sellShare() {
				this.$emit('showShare', !this.sellShow);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sell-share-list-con {
		width: 260rpx;
		height: 100%;
	}

	.sell-share-list {
		position: absolute;
		bottom: 100rpx;
		left: 0;
		right: 0;
		background-color: #fff;
		font-size: $uni-font-size-base;
		box-shadow: 0px -5rpx 5rpx 0px rgba(11, 2, 5, 0.1);

		&>view {
			height: 89rpx;
			line-height: 88rpx;
			border-top: 1px solid $uni-border-color;

			&:first-child {
				border-top: none;
			}
		}
		
		&>button{
			height: 89rpx;
			line-height: 88rpx;
			border-top: 1px solid $uni-border-color;
			font-size: $uni-font-size-base;
		}

		.off {
			color: $uni-text-color-grey;
		}
	}

	.sell-btn {
		@extend .alignJustify;
		@extend .flex1;
		color: #fff;
		height: 100%;
		background: linear-gradient(-270deg, #ffb507 0%, #ff8a2a 100%);
		color: $uni-text-color-inverse;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 200rpx 0 0 200rpx;
		.symbol{
			font-size: $uni-font-size-sm;
		}
		&:after {
			display: none;
		}
	}
</style>
